<template>
  <div class="tree-box">
    <div v-for="(item, index) in children" :key="index" class="sc-item">
      <item :data="item" />
      <tree-item v-if="item.children && item.children.length > 0" :datas="item.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  components: {
    TreeItem: () => import('./TreeItem'),
    Item: () => import('./Item')
  },
  props: {
    datas: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      children: this.datas
    }
  },
  watch: {
    datas: {
      handler(newVal) {
        this.children = newVal
      },
      immediate: true,
      deep: true
    }
  },
}
</script>

<style scoped>
.tree-box {
  width: 100%;
  height: 100%;
  padding-left: 20px;
}
</style>
